<template>
    <div>
        <div class="container">
            <el-form
                :style='{"padding":"40px 40px","boxShadow":"0 6px 30px rgba(0, 0, 0, 0.1)","borderRadius":"16px","background":"rgba(255, 255, 255, 0.85)","width":"450px","height":"auto"}'>
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 20px 0","lineHeight":"50px","fontSize":"28px","fontWeight":"700","color":"#2c3e50","textAlign":"center"}'
                     class="title-container">购买鸭超市外卖登录
                </div>

                <div v-if="loginType==1" class="list-item"
                     :style='{"width":"80%","margin":"20px auto","alignItems":"center","display":"flex"}'>
                    <div class="lable"
                         :style='{"width":"100px","lineHeight":"50px","fontSize":"16px","fontWeight":"500","color":"#4b5a6b"}'>用户名：</div>
                    <input :style='{"border":"1px solid #e1e4e8","width":"100%","padding":"0 20px","fontSize":"16px","color":"#4a4a4a","borderRadius":"12px","height":"50px","boxShadow":"0 2px 15px rgba(0, 0, 0, 0.1)","transition":"border-color 0.3s ease"}'
                           placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username">
                </div>

                <div v-if="loginType==1" class="list-item"
                     :style='{"width":"80%","margin":"20px auto","alignItems":"center","display":"flex"}'>
                    <div class="lable"
                         :style='{"width":"100px","lineHeight":"50px","fontSize":"16px","fontWeight":"500","color":"#4b5a6b"}'>密码：</div>
                    <input :style='{"border":"1px solid #e1e4e8","width":"100%","padding":"0 20px","fontSize":"16px","color":"#4a4a4a","borderRadius":"12px","height":"50px","boxShadow":"0 2px 15px rgba(0, 0, 0, 0.1)","transition":"border-color 0.3s ease"}'
                           placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password">
                </div>

                <div :style='{"width":"80%","textAlign":"center","margin":"20px auto"}' v-if="roles.length>1"
                     prop="loginInRole" class="list-type">
                    <el-radio v-if="loginType==1||(loginType==2&&item.roleName!='管理员')" v-for="item in roles"
                              v-bind:key="item.roleName" v-model="rulesForm.role" :label="item.roleName">
                        {{ item.roleName }}
                    </el-radio>
                </div>

                <div :style='{"row-gap":"15px","padding":"0 15%","margin":"20px auto","alignItems":"center","columnGap":"15px","flexWrap":"wrap","display":"flex","width":"100%","justifyContent":"center"}'>
                    <el-button v-if="loginType==1"
                               :style='{"border":"0","cursor":"pointer","padding":"0 30px","margin":"0","outline":"none","color":"#fff","borderRadius":"12px","background":"linear-gradient(135deg, #6f7dff, #4a5bbd)","width":"100%","fontSize":"16px","height":"50px","boxShadow":"0 6px 20px rgba(0, 0, 0, 0.2)","transition":"all 0.3s ease"}'
                               type="primary" @click="login()" class="loginInBt">登录
                    </el-button>
                    <el-button
                        :style='{"border":"1px solid #6f7dff","cursor":"pointer","padding":"0 30px","margin":"0","outline":"none","color":"#6f7dff","borderRadius":"12px","background":"#fff","flex":"1","width":"auto","fontSize":"16px","height":"50px","boxShadow":"0 6px 20px rgba(0, 0, 0, 0.1)","transition":"all 0.3s ease"}'
                        type="primary" @click="register('qishou')" class="register">注册骑手
                    </el-button>
                    <el-button
                        :style='{"border":"1px solid #6f7dff","cursor":"pointer","padding":"0 30px","margin":"0","outline":"none","color":"#6f7dff","borderRadius":"12px","background":"#fff","flex":"1","width":"auto","fontSize":"16px","height":"50px","boxShadow":"0 6px 20px rgba(0, 0, 0, 0.1)","transition":"all 0.3s ease"}'
                        type="primary" @click="register('shangjia')" class="register">注册商家
                    </el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import menu from "@/utils/menu";

export default {
    data() {
        return {
            verifyCheck2: false,
            flag: false,
            baseUrl: this.$base.url,
            loginType: 1,
            rulesForm: {
                username: "",
                password: "",
                role: "",
            },
            menus: [],
            roles: [],
            tableName: "",
        };
    },
    mounted() {
        let menus = menu.list();
        this.menus = menus;

        for (let i = 0; i < this.menus.length; i++) {
            if (this.menus[i].hasBackLogin == '是') {
                this.roles.push(this.menus[i])
            }
        }
    },
    methods: {
        register(tableName) {
            this.$storage.set("loginTable", tableName);
            this.$router.push({path: '/register', query: {pageFlag: 'register'}})
        },
        login() {
            if (!this.rulesForm.username) {
                this.$message.error("请输入用户名");
                return;
            }
            if (!this.rulesForm.password) {
                this.$message.error("请输入密码");
                return;
            }
            if (this.roles.length > 1) {
                if (!this.rulesForm.role) {
                    this.$message.error("请选择角色");
                    return;
                }

                let menus = this.menus;
                for (let i = 0; i < menus.length; i++) {
                    if (menus[i].roleName == this.rulesForm.role) {
                        this.tableName = menus[i].tableName;
                    }
                }
            } else {
                this.tableName = this.roles[0].tableName;
                this.rulesForm.role = this.roles[0].roleName;
            }

            this.loginPost()
        },
        loginPost() {
            this.$http({
                url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
                method: "post"
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.$storage.set("Token", data.token);
                    this.$storage.set("role", this.rulesForm.role);
                    this.$storage.set("sessionTable", this.tableName);
                    this.$storage.set("adminName", this.rulesForm.username);
                    this.$router.replace({path: "/"});
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f0f4f8, #e0e8f0);
}

.list-item /deep/ .el-input .el-input__inner {
    border: 1px solid #e1e4e8;
    padding: 0 20px;
    color: #4a4a4a;
    font-size: 16px;
    border-radius: 12px;
    height: 50px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
}

.list-item /deep/ .el-input:focus .el-input__inner {
    border-color: #4e73df;
    box-shadow: 0 2px 15px rgba(78, 115, 223, 0.4);
}

.list-type /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #2c3e50;
    font-size: 16px;
}

.el-button {
    font-size: 16px;
    padding: 0 30px;
    border-radius: 12px;
    height: 50px;
    transition: all 0.3s ease;
}

.el-button:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.el-button.register {
    background-color: #fff;
    color: #6f7dff;
    border: 1px solid #6f7dff;
}

.el-button.register:hover {
    background-color: #6f7dff;
    color: #fff;
}
</style>
